<template>
	<view class="container p-20">
		<view class="bg-white r-20">
			<view class="d-flex flex-column justify-content-between bg-theme r-t-l-20 r-t-r-20 text-center p-40">
				<view class="font-size-24 font-color-white">桌位号</view>
				<view class="font-size-50 font-weight-bold font-color-white">{{order.table_sticker_code}}</view>
			</view>
			
			<view class="title">商品详情</view>
			<view v-for="(item,index) in order.items" class="d-flex flex-row justify-content-between align-items-start item">
				<view class="w-70 font-size-28">
					<view>{{item.product.name}}</view>
					<view class="font-color-gray">{{item.prop_text}}</view>
				</view>
				<view class="w-30 d-flex flex-row justify-content-between m-l-20">
					<view class="font-size-24">x{{item.quantity||0}}</view>
					<view class="font-size-28">￥{{item.total_price||0.00}}</view>
				</view>
			</view>
			
			<view class="d-flex flex-row justify-content-between align-items-center p-20 p-t-40">
				<view class="d-flex flex-row justify-content-between align-items-center">
					<image class="tel" src="../../static/tel.svg"></image>
					<view class="font-color-theme">联系商家</view>
				</view>
				<view>实付：<text>￥{{order.total_price||0.00}}</text></view>
			</view>
		</view>
		
		<view class="d-flex flex-column bg-white r-20 m-t-20 p-b-20">
			<view class="title">订单信息</view>
			<view class="item d-flex flex-row justify-content-between font-size-28">
				<view>就餐方式</view>
				<view>{{order.dine_type_name}}</view>
			</view>
			<view class="item d-flex flex-row justify-content-between font-size-28">
				<view>商家名称</view>
				<view>伊香牛肉面-福州大道</view>
			</view>
			<view class="item d-flex flex-row justify-content-between font-size-28">
				<view>下单时间</view>
				<view>{{order.created_at||'-'}}</view>
			</view>
			<view class="item d-flex flex-row justify-content-between font-size-28">
				<view>订单号</view>
				<view>{{order.code}}</view>
			</view>
			<view class="item d-flex flex-row justify-content-between font-size-28">
				<view>备注</view>
				<view>{{order.note||'-'}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {getOrder} from '../../api/order.js'
	export default{
		name:'order-view',
		data(){
			return {
				order: {}
			}
		},
		onLoad(options) {
			this.order.id = options.id;
			this.init();
		},
		methods: {
			init(){
				getOrder(this.order.id)
				.then(res => {
					this.order = res;
				})
				.catch(res => {
					
				})
			}
		}
	}
</script>

<style scoped>
	.title {
		padding: 20rpx 20rpx 30rpx 20rpx;
	}
	.item {
		padding: 20rpx 20rpx 0 20rpx;
	}
	.tel {
		width: 50rpx;
		height: 50rpx;
	}	
	.divider-line{
		width: 100%;
		height: 2rpx;
		margin: 20rpx 0;
		background-color: #eee;
	}
</style>
